<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>学生选座</title>
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
    <meta http-equiv="keywords" name="keywords" content="" />
    <meta http-equiv="description" name="description" content="" />
    <link href="css/ydui.css" rel="stylesheet" />
    <link href="https://cdn.bootcss.com/Swiper/4.2.0/css/swiper.min.css" rel="stylesheet">
    <script src="js/ydui.flexible.js"></script>
	<link rel="stylesheet" type="text/css" href="css/all.css?v=201850002"/>
	<link rel="stylesheet" href="../css/jquery.mobilee-calendar.css" />
	<link href="https://cdn.bootcss.com/Swiper/4.3.0/css/swiper.min.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_379511_w4u7dyknvu.css"/>
</head>
	<body>
		<div class="g-flexview"  id="app" v-cloak>
	        <header class="m-navbar">
	            <a onclick="history.back()" class="navbar-item"><i class="back-ico"></i></a>
	            <div class="navbar-center"><span class="navbar-title">团队组建及角色划分</span></div>
	        </header>			
			<div class="g-scrollview">
				<div class="coursecontent">
				<h1 style="font-size: .3rem;">各角色岗位职责:</h1></br>
				
				首席执行官(CEO)：CEO是一个团队的核心，负责提交团队作业，修改小组的名称</br></br>
				
				首席市场官(CMO):CMO是指企业中负责市场运营工作的高级管理人员，又称作市场部经理、营销总监</br></br>
				
				首席技术官(CTO):CTO（首席技术官）,即企业内负责技术的最高负责人</br></br>
				
				首席财务官(CFO):CFO是企业治理结构发展到一个新阶段的必然产物。没有首席财务官的治理结构不是现代意义上完善的治理结构。</br></br>
				
				顾问(COU):COU顾问提供的意见以独立、中立为首要</br></br>
				
				政府及公共组织(GOV):GOV一般用于描述拥有作为美国联邦政府一个分支或机构的域名的实体</br>		</br>			
				</div>
				<div class="arrange-seats clearfix">
					<div class="swiper-wrapper">
						<div class="swiper-slide" v-for="el in datalist">
							<div class="seats-list">							
								<div class="head-content">
									<div v-for="sel in el.user_ids.split(',')" v-if="sel.split('_')[1]=='CEO'">					
										<p v-bind:class="['radius',sel.split('_')[1]=='CEO'&&'change']" ><span>{{sel.split('_')[0]}}</span></p>
										<p class="test" >首席执行官</p>	.
									</div>
									<div v-if="el['group_roles']==undefined||el.group_roles.split(',').indexOf('CEO')=='-1'" v-on:click="changeinfo(el,'CEO')">
										<p v-bind:class="['radius',classid==el.id&&classname=='CEO'&&'change']"><span>CEO</span></p>
										<p class="test" >首席执行官</p>								
									</div>
								</div>
								<div class="center-content clearfix">
									<div class="left-box">
										<div v-for="sel in el.user_ids.split(',')" v-if="sel.split('_')[1]=='CMO'">					
											<p v-bind:class="['radius',sel.split('_')[1]=='CMO'&&'change']" ><span>{{sel.split('_')[0]}}</span></p>
											<p class="test" >首席市场官</p>	.
										</div>
										<div v-if="el['group_roles']==undefined||el.group_roles.split(',').indexOf('CMO')=='-1'" v-on:click="changeinfo(el,'CMO')">
											<p v-bind:class="['radius',classid==el.id&&classname=='CMO'&&'change']"><span>CMO</span></p>
											<p class="test" >首席市场官</p>								
										</div>							
										<div v-for="sel in el.user_ids.split(',')" v-if="sel.split('_')[1]=='CFO'">					
											<p v-bind:class="['radius',sel.split('_')[1]=='CFO'&&'change']" ><span>{{sel.split('_')[0]}}</span></p>
											<p class="test" >首席财务官</p>	.
										</div>
										<div v-if="el['group_roles']==undefined||el.group_roles.split(',').indexOf('CFO')=='-1'" v-on:click="changeinfo(el,'CFO')"> 
											<p v-bind:class="['radius',classid==el.id&&classname=='CFO'&&'change']"><span>CFO</span></p>
											<p class="test" >首席财务官</p>								
										</div>						
									</div>
									<div class="center-box">
										<div class="box-content"> 
											<p v-if="classid!=el.id||classname!='CEO'">{{el.group_name}}</p>
											<input type="text" v-if="classid==el.id&&classname=='CEO'" placeholder="输入队名" v-attr="{'value':el.group_name}" v-model="group_name" />
						</div>
									</div>
									<div class="right-box">
										<div v-for="sel in el.user_ids.split(',')" v-if="sel.split('_')[1]=='CTO'">					
											<p v-bind:class="['radius',sel.split('_')[1]=='CTO'&&'change']" ><span>{{sel.split('_')[0]}}</span></p>
											<p class="test" >首席技术官</p>	.
										</div>
										<div v-if="el['group_roles']==undefined||el.group_roles.split(',').indexOf('CTO')=='-1'" v-on:click="changeinfo(el,'CTO')">
											<p v-bind:class="['radius',classid==el.id&&classname=='CTO'&&'change']"><span>CTO</span></p>
											<p class="test" >首席技术官</p>								
										</div>								
										<div v-for="sel in el.user_ids.split(',')" v-if="sel.split('_')[1]=='COU'">					
											<p v-bind:class="['radius',sel.split('_')[1]=='COU'&&'change']" ><span>{{sel.split('_')[0]}}</span></p>
											<p class="test" >顾问</p>	.
										</div>
										<div v-if="el['group_roles']==undefined||el.group_roles.split(',').indexOf('COU')=='-1'" v-on:click="changeinfo(el,'COU')">
											<p v-bind:class="['radius',classid==el.id&&classname=='COU'&&'change']"><span>COU</span></p>
											<p class="test" >顾问</p>								
										</div>		
								
									</div>	
								</div>
								<div class="bottom-content">
									<div v-for="sel in el.user_ids.split(',')" v-if="sel.split('_')[1]=='GOV'">					
										<p v-bind:class="['radius',sel.split('_')[1]=='GOV'&&'change']" ><span>{{sel.split('_')[0]}}</span></p>
										<p class="test" >政府及公共组织</p>	.
									</div>
									<div v-if="el['group_roles']==undefined||el.group_roles.split(',').indexOf('GOV')=='-1'" v-on:click="changeinfo(el,'GOV')">
										<p v-bind:class="['radius',classid==el.id&&classname=='GOV'&&'change']"><span>GOV</span></p>
										<p class="test" >政府及公共组织</p>								
									</div>							
								</div>
							</div>									 
						</div>
					</div>
					<div class="swiper-pagination"></div>
				</div>				
			</div>	
			<button type="button" class="btn-block btn-warning" v-on:click="post">确认座位</button>
			
		</div>
	</body>
    <script src="https://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.15/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/Swiper/4.3.0/js/swiper.min.js"></script>
    <script src="js/ydui.js"></script>
    <script type="text/javascript" src="../js/jquery.e-calendar.js"></script>
	<script src="../js/all.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var model= new Vue({
			el:"#app",
			data:{
				datalist:[],
				classid:"",
				hide:false,
				classname:"",
				group_name:"",
				group_cheer:"",
				courseId:ComFunJS.getQueryString('courseId'),				
			},
			methods:{
				get:function(){		
					ComFunJS.getJSON(ComFunJS.APIURL('course/team/stu/list'),{courseId:model.courseId},function(r){
						model.datalist=r.data;
			            var swiper= new Swiper('.arrange-seats', {
						  pagination: {
						        el: '.swiper-pagination',
						        type: 'custom',
						        renderCustom: function (swiper, current, total) {
						          return current + ' of ' + total;
						        }
						  },						
			            });						
					})
				},
				changeinfo:function(el,name){
					model.classname=name
					model.classid=el.id
				},
				post:function(){
					ComFunJS.postJSON(ComFunJS.APIURL('course/team/stu/join'),{courseId:model.courseId,groupId:model.classid,groupRole:model.classname,groupName:model.group_name
						,groupCheer:model.group_cheer},function(r){
						if(r.code==200){
							model.hide=true
							ComFunJS.showMsg('选座成功','success',function(){
								window.location.href='coursedetail.html?'+'courseId='+model.courseId+'&'+'type='+model.classname
							})
						}else if(r.code==400){
							ComFunJS.showMsg(r.msg,'error')						
						}
					})
				}				
			},
			mounted:function(){
				this.$nextTick(function(){
					model.get()
				})
			}
		})
	</script>
</html>
